<template>
    <el-container>
        <el-main class="content-main">
            <el-table :data="tableData" size="small" v-loading="paginations.loading" element-loading-text="正在加载中..." highlight-current-row stripe style="width: 100%; margin-bottom: 10px;">
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="module" label="模块" width="150"></el-table-column>
                <el-table-column prop="operation" label="操作" width="100"></el-table-column>
                <el-table-column prop="content" label="内容"></el-table-column>
                <el-table-column prop="addtime" label="记录时间" width="200"></el-table-column>
            </el-table>
            <el-pagination
                    v-if='paginations.total > 0'
                    :page-size="paginations.pageSize"
                    :layout="paginations.layout"
                    :total="paginations.total"
                    :current-page='paginations.pageIndex'
                    @current-change='jump'
                    style="text-align: right;">
            </el-pagination>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "log",
        data: function() {
            return {
                paginations: {
                    loading: true,
                    pageIndex: 1,   // 当前位于哪页
                    pageSize: 20,   // 页显示多少条
                    total: 0,       // 总数
                    layout: "total, prev, pager, next"   // 翻页属性
                },
                tableData: [],
            };
        },
        methods:  {
            init() {
                this.jump(1);
            },
            jump(i) {
                this.paginations.loading = true;
                this.paginations.pageIndex = i;
                this.$store.dispatch('ajax', {url: 'api/queryLog', method: 'get', data: {page: i, number: this.paginations.pageSize}, succeed: (res) => {
                        this.paginations.loading = false;
                        this.tableData = res.rows;
                        this.paginations.total = res.total;
                    }
                });
            }
        },
        mounted: function () {
            this.init();
        }
    }
</script>
